<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />

<script type="text/javascript">
var keystring = "";//记录按键的字符串
function $(s){return document.getElementById(s)?document.getElementById(s):s;}
var t0= new Date().getTime();

function keypress(e) // 回车键识别为0x0d，也反映到此函数中，其他控制字符如END全不在此函数中
{
　 var currKey=0,CapsLock=0,e=e||event;
   // http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_which  to see e.which's value
　   currKey=e.keyCode||e.which||e.charCode;
        //　 CapsLock=currKey>=65&&currKey<=90;
     thisNew = String.fromCharCode(e.keyCode);
     
   var t= new Date().getTime();
　 $("contentPress").innerHTML= "press: " + thisNew ;
　 $("idKeyPressCode").innerHTML= "keyPress code: " + e.keyCode + "";
var xhr = new XMLHttpRequest();
if( 13==e.keyCode ) // 回车转成Linux的回车
{xhr.open('GET', '/cmdSendToVi?cmd=10', true);
 $("idForUsers").innerHTML += "回车键";
}
else
{
 xhr.open('GET', '/cmdSendToVi?cmd='+ e.keyCode, true);
 $("idForUsers").innerHTML += thisNew;
}
xhr.send();

window.scrollTo(0,100000);
}
function keydown(e)
{
   var thisNew;
　 var e=e||event;
 
　 var currKey=e.keyCode||e.which||e.charCode;
        var pdate=new Date();
        var ptime=pdate.getMilliseconds();

   //if( currKey==8 || currKey==9 || currKey==27  || ( currKey>=33 && currKey<=40 ) || currKey==45 || currKey==46)
   if( currKey==8 || currKey==9 || currKey==27 ) //|| currKey==38 ) 
   {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/cmdSendToVi?cmd='+ currKey, true);
    xhr.send();

    if( currKey==8 ) $("idForUsers").innerHTML += "BACKSPACE键";
    if( currKey==9 ) $("idForUsers").innerHTML += "TAB键";
    if( currKey==27 ) $("idForUsers").innerHTML += "ESC键";
    if( currKey==38 ) $("idForUsers").innerHTML += "PageUp键";
   }
 
   if( currKey==35)
     thisNew = "END";
   else if( currKey==33)
     thisNew = "PageUP";
   else if( currKey==34)
     thisNew = "PageDOWN";
   else if( currKey==36)
     thisNew = "HOME";
   else if( currKey==37)
     thisNew = "LEFT";
   else if( currKey==38)
     thisNew = "UP";
   else if( currKey==39)
     thisNew = "RIGHT";
   else if( currKey==40)
     thisNew = "DOWN";
   else if( currKey==45)
     thisNew = "INSERT";
   else if( currKey==46)
     thisNew = "DEL";
   else if( currKey==8)
     thisNew = "BACKSPACE";
   else if( currKey==9)
     thisNew = "TAB";
   else if( currKey==13)
     thisNew = "OD";
   else if( currKey==16)
     thisNew = "SHIFT";
   else if( currKey==17)
     thisNew = "CONTROL";
   else if( currKey==18)
     thisNew = "ALT";
   else if( currKey==20)
     thisNew = "CAPLOCK";
   else if( currKey==27)
     thisNew = "ESC";
   else
     thisNew = "maybe wrong";
     //thisNew = String.fromCharCode(e.keyCode);
     
　 $("contentDown").innerHTML= "down: " + thisNew;
　 $("idKeyDownCode").innerHTML= "keyDown code: " + e.keyCode + "";
}
function keyup(e)
{
    var t= new Date().getTime();
    keystring += "TOTAL@" + (t-t0) + "ms " + $("cmd").value + "<br/>";
    $("content").innerHTML = keystring;
}
document.onkeypress=keypress;
document.onkeydown =keydown;
/*
document.onkeyup =keyup;
<input type="text" id="cmd" value=""/>
*/
</script>
    </head>
    <body>
<span style='background-color:#FF0000' id="history"></span>
<input type="button" value="清空记录" onclick="$('content').innerHTML = '';keystring = '';"/>
<br/>keydown能识别出特殊的，像什么HOME，SHIFT，ESC。但keypress能正确识别出需要按shift的最终结果！！！ <br/>
它们两个，必须配合在一起使用！！！ 控制键只能看down，而有两个功能的键只能等shift按完后看press的结果。
<br>
<span style='background-color:#FF7000' id="contentDown"></span>
<br>
<span style='background-color:#00F000' id="idKeyDownCode"></span>
<br>
<br>
<br>
<span style='background-color:#FF7000' id="contentPress"></span>
<br>
<span style='background-color:#00F000' id="idKeyPressCode"></span>

<h1 id="idForUsers">
</h1>
</body>
</html>
